<template>

  <div class="app-container">

    <el-form ref="formdata" v-model="hallid" :inline="true" class="demo-form-inline">
      <el-form-item label="放映厅号">
        <el-input v-model="hallid" placeholder="放映厅编号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="select(hallid)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button id="add" type="success" @click="toAdd">新增时间</el-button>

    <el-table
      :data="ShowFVO.slice((listQuery.curPage-1)*listQuery.pageSize,listQuery.curPage*listQuery.pageSize)"
      border fit highlight-current-row>

      <el-table-column align="center" label="序号" width="90px" type="index" />

      <el-table-column align="center" prop="name" label="电影名字" width="350px">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column label="场次" prop="type" width="400px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.s_day }}</span>
          <span>{{ scope.row.s_hour }}</span>
        </template>
      </el-table-column>

      <el-table-column label="放映厅" width="200" prop="dir" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.s_playhall }} 号厅</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" round @click="updata(scope.row)">修改</el-button>
          <el-button type="danger" round @click="dele(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <pagination  :total="total" v-model="ShowFVO" :page.sync="listQuery.curPage":limit.sync="listQuery.pageSize"  @pagination="show"/>
    <!--这里控制分页部分显示 总行数, 向前按钮, 页码, 向后按钮-->



  </div>
</template>

<script>
import Pagination from '@/components/Pagination/index'
export default {
  name: 'ComplexTable',
  components: { Pagination },
  data() {
    return {
        total:0,
      listQuery: {
        curPage: 1,
        pageSize: 10
      },
      ShowFVO: [
        {
          id: 6,
          of_id: 1,
          name: '勇敢者游戏2：再战巅峰',
          s_day: '12月21日',
          s_hour: '8:00',
          s_playhall: 0
        }
      ],
      hallid:''
    }
  },
  created() {
    this.show()
  },
  methods: {
    show() { // 展示所有信息
      var oldate=this.hallid;
      console.log(oldate);
      var vm = this;
        if(oldate==""){
            this.axios({
                url: 'http://localhost:81/api/show/list',
                params: this.listQuery
            }).then(function(res) {
                if (res.data.success) {
                    console.log(res.data.data);
                    vm.ShowFVO = res.data.data.list;
                    vm.total = res.data.data.total;
                    // ;
                }
            }).catch(function() {
                console.log('获取参数异常')
            });
        }
    },

    updata(ids) { // 修改电影的方法
      var id = ids.id
      this.$router.push({ name: 'Updatatimetable', params: { id }})
    },
    dele(datas) { // 删除电影的方法
      var fnId = datas.id
      var vm = this
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 点击确认删除后，进行删除，发送ajax请求(参数fnId)
        console.log(fnId)
        this.axios({
          url: 'http://localhost:81/api/show/delete',
          params: { id: fnId }
        }).then(function(res) {
          if (res.data.success) { // 如果成功
            vm.$message({ // 显示删除成功
              type: 'success',
              message: '删除成功!'
            })
            vm.show()
          } else { // 反之失败
            vm.$message({
              type: 'info',
              message: '删除失败!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    select(formdata) {
      var oldate=formdata;
      var vm = this
      this.axios({
        url: 'http://localhost:81/api/show/list',
        params: {
          s_playhall: formdata
        }
      }).then(function(res) {
        if (res.data.success) {
          vm.ShowFVO = res.data.data.list;
          console.log(res.data.data);
          vm.total=res.data.data.total;
        }
      })
    },
    toAdd() { // 添加电影的方法
      this.$router.push('/addtimetable')
    }

  }
}
</script>
